<template>
	<view class="scroll-box">
		<scroll-view scroll-x="true" class="scroll-items scroll-nobar">
			<view class="scroll-item" v-for="(item,index) in scrollData" :key="index">
				<view @click="toUrl(item.title,item.id)">
					<view class="video-box" v-if="item.isReplay">
						<view class="video-type">{{item.videoType}}</view>
						<view class="video-date">
							<text>{{item.date}}</text>
							<text>{{item.time}}</text>
						</view>
					</view>
					<image v-if="isRequest" :src="'/api'+item.image"></image>
					<image v-else :src="item.image"></image>
					<br>
					<text class="video-title">{{item.title}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		type
	} from 'os';
	export default {
		name: "component-scroll-video",
		props: {
			scrollVideoData: {
				type: Array,
				default () {
					return []
				}
			},
			isRequest: {
				type: Boolean,
				default: true
			},
			isNew: {
				type: Boolean,
				default: true
			},
			isVideo:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				scrollData: this.scrollVideoData
			};
		},
		methods: {
			toUrl(title, id) {
				if (this.isNew && !this.isVideo) {
					uni.navigateTo({
						url: "../../subpages/news/news?title=" + title
					})
				} else if(this.isVideo){
					uni.navigateTo({
						url:'../../subpages/news-detail/news-detail?id='+id+"&i=1"
					})
				} else {
					uni.navigateTo({
						url: "../../subpages/news-detail/news-detail?id=" + id
					})
				}
			}
		}
	}
</script>

<style>
	/deep/.scroll-nobar ::-webkit-scrollbar {
		display: none;
	}

	.scroll-box {
		width: 100%;
		height: 264rpx;
		box-sizing: border-box;
		margin-top: 26rpx;
	}

	.scroll-items {
		white-space: nowrap;
		box-sizing: border-box;
	}

	.scroll-items .scroll-item {
		display: inline-block;
		width: 382rpx;
		margin-right: 17rpx;
		position: relative;
	}

	.scroll-items .scroll-item image {
		width: 382rpx;
		height: 214rpx;
		border-radius: 12rpx;
	}

	.video-title {
		display: inline-block;
		width: 352rpx;
		font-size: 28rpx;
		font-family: Noto Sans S Chinese;
		font-weight: 400;
		color: #000000;
		margin: 0 0 0 15rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.video-box {
		position: absolute;
		width: 382rpx;
		height: 200rpx;
		z-index: 10;
	}

	.video-type {
		width: 119rpx;
		height: 44rpx;
		background: #00D975;
		border-radius: 12rpx;
		font-size: 24rpx;
		font-family: Noto Sans S Chinese;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		left: 11rpx;

	}

	.video-date {
		width: 360rpx;
		position: absolute;
		left: 50%;
		bottom: 0;
		margin-left: -180rpx;
		display: flex;
		justify-content: space-between;
	}

	.video-date text {
		font-size: 40rpx;
		font-family: DIN Condensed;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>
